<template>
  <div class="box_container">
    <div class="mymessage">
      <div class="my_img">
        <img
          v-if="personal.head_img"
          :src="'http://157.122.54.189:9083' + personal.head_img"
          alt=""
        />
        <img v-else src="@/assets/mypic.png" alt="" />
      </div>

      <div class="my_name">
        <div class="my_name_top">
          <span
            class="iconfont"
            :class="{
              iconxingbienan: personal.gender === 1,
              iconxingbienv: personal.gender === 0,
            }"
          ></span>
          <span>{{ personal.nickname }}</span>
        </div>
        <div class="my_name_time">2020-11-20</div>
      </div>
      <div class="my_more iconfont iconjiantou1" @click="toedit"></div>
    </div>
    <!--组件-->
    <div class="my_container">
      <!--我的关注-->
      <myfocusbtn
        msg="我的关注"
        submsg="关注的用户"
        @click.native="tomyfocus"
      ></myfocusbtn>
      <!--我的跟贴-->
      <myfocusbtn msg="我的跟贴" submsg="跟贴/回复"></myfocusbtn>
      <!--我的收藏-->
      <myfocusbtn msg="我的收藏" submsg="文章/视频"></myfocusbtn>
      <!--设置-->
      <myfocusbtn msg="设置" @click.native="toedit"></myfocusbtn>
    </div>
    <div class="quitbtn" @click="quitout">退 出</div>
  </div>
</template>

<script>
import myfocusbtn from "@/components/myfocusbtn";
export default {
  components: {
    myfocusbtn,
  },
  data() {
    return {
      personal: {},
    };
  },
  created() {
    const id = localStorage.getItem("tokenid");
    this.$axios({
      method: "get",
      url: `/user/${id}`,
      //设置了请求拦截
      // headers: {
      //   Authorization: "Bearer " + localStorage.getItem("token"),
      // },
    }).then((res) => {
      //获取的信息赋值给this.personal
      this.personal = res.data.data;
    });
  },
  methods: {
    //退出按钮
    quitout() {
      window.localStorage.removeItem("token");
      window.localStorage.removeItem("tokenid");
      this.$toast("退出成功");
      setTimeout(() => {
        this.$router.replace("/login");
      }, 1000);
    },
    toedit() {
      this.$router.push("/edit");
    },
    //去关注页面
    tomyfocus() {
      this.$router.push("/myfocus");
    },
  },
};
</script>

<style lang="less" scoped>
.mymessage {
  padding: 16 / 360 * 100vw;
  height: 100 / 360 * 100vw;
  border-bottom: 5px solid #e4e4e4;
}
.box_container {
  font-family: "Microsoft YaHei";
  background-color: #f2f2f2;
  min-height: 100vh;
  .mymessage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .my_name {
      .iconxingbienan {
        color: #7cbceb;
        margin-right: 5 / 360 * 100vw;
      }
      .iconxingbienv {
        color: #f368be;
        margin-right: 5 / 360 * 100vw;
      }
      flex: 1;
      margin-left: 12 / 360 * 100vw;
      .my_name_time {
        padding-top: 5 / 360 * 100vw;
        color: #a3a6b9;
      }
    }
    .iconjiantou1 {
      color: #b5b8c7;
      width: 50 / 360 * 100vw;
      height: 50 / 360 * 100vw;
      line-height: 50 / 360 * 100vw;
      text-align: right;
    }
    .my_img {
      width: 70 / 360 * 100vw;
      height: 70 / 360 * 100vw;
      background-color: orange;
      border-radius: 50%;
      overflow: hidden;
      img {
        height: 100%;
      }
    }
  }
}
.my_container {
  padding: 16 / 360 * 100vw;
}
.quitbtn {
  position: absolute;
  bottom: 50 / 360 * 100vw;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  line-height: 40 / 360 * 100vw;
  width: 300 / 360 * 100vw;
  height: 40 / 360 * 100vw;
  background-color: #cc3300;
  border-radius: 20px;
  color: white;
  box-shadow: 1px 2px 3px #470e0e3b;
}
</style>